<!--
 * @Description: 样式学习
 * @Author: rendc
 * @Date: 2025-09-11 09:38:51
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-12 14:26:39
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>样式学习</title>
  <!-- 图标 -->
  <link rel="icon" href="https://www.baidu.com/favicon.ico">
  <!-- 外部样式表 -->
  <!-- <link rel="stylesheet" href="style.css"> -->
  <!-- 内部样式表 一般放在head标签中-->
  <style>
    #mydiv {
      color: red;
    }

    /* 类选择器 */
    .testDiv {
      color: yellowgreen;
    }

    div {
      /* font-size: 20px; */
      color: green;
    }



    /* 后代选择器 */
    /* div p {
      color: hotpink;
    } */

    /* 子代选择器 */
    div>p {
      color: hotpink;
    }

    /* 交集选择器 */
    divp {
      color: orange;
    }



    p {
      color: red;
    }

    /* 并集选择器 多选择器 */
    #mydiv,
    .testDiv,
    p,
    div,
    h1 {
      font-size: 26px;
      color: #fff;
      color: #ffffff;
      color: #999999;
      color: #678;
      color: #667788;
      color: #667898;
      color: #667898;
      color: #999999;
    }

    /* 相邻兄弟选择器 选后面的元素*/
    /* div+p {
      font-size: 56px;
    } */

    /* 通用兄弟选择器 选后面的元素*/
    div~p {
      font-size: 56px;
    }

    #loginBtn {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      color: #606266;
      font-size: 16px;
      padding: 10px 20px;
      width: 300px;
      /* 文字对齐方式 */
      text-align: center;
    }

    /* #loginBtn光标悬浮的状态 */
    #loginBtn:hover {
      color: #4fbc8d;
      background-color: #E8F9F4;
      /* 鼠标光标变成点击的小手 */
      cursor: pointer;
    }

    #div3 {
      font-style: italic;
    }
  </style>
</head>

<body>
  <!-- 字体标签 -->
  <!-- color: rgb(255, 255, 255); -->
  <div style="color: #fff;">
    设置字体颜色
  </div>
  <div id="div3" style="font-style: normal;">
    设置字体倾斜
  </div>
  <div style="font-weight: 900;">
    控制字体的粗细程度
  </div>
  <div style="font-weight:normal;">
    控制字体的粗细程度
  </div>
  <div style="font-weight:400;">
    控制字体的粗细程度
  </div>
  <div style="font-weight:bold;">
    控制字体的粗细程度
  </div>
  <div style="font-weight:700;">
    控制字体的粗细程度
  </div>
  <div style="font-weight:bolder;">
    控制字体的粗细程度
  </div>
  <div style="font-weight:900;font-size: 30px">
    控制字体的粗细程度
  </div>
  <div style="width: 50%;border: 1px solid red;">
    width: 50%
  </div>
  <br>
  <div style="font-size: 20px;height: 4em;border: 1px solid red;">
    font: size 40px ;height: 4em;
  </div>

  <br>
  <div style="font-size: 20px;height: 2rem;border: 1px solid red;">
    font: size 40px ;height: 2rem;
  </div>
  <br>
  <div style="color:#606266;font-size: 10px;height: 4rem;border: 1px solid red;">
    最终解释权归商家所有
  </div>
  <b>加粗</b>
  <strong>强调</strong>

  <div style="font-family: serif;">
    字体 serif
  </div>

  <div style="font-family: sans-serif;">
    字体 sans-serif
  </div>
  <div style="font-family: monospace;">
    等宽字体 monospace 1 0
  </div>
  <div style="font-family: cursive;">
    字体 cursive
  </div>

  <div style="font-family: fantasy;">
    字体 fantasy
  </div>

  <div style="font-family:'Microsoft YaHei','Courier New', Courier, monospace">
    多值
  </div>





  <hr>
  <i>123</i>
  <!-- 登录按钮 -->
  <div id="loginBtn">
    登录
  </div>
  样式学习
  <p>p</p>
  <!-- 内联样式 - 行内样式 -->
  <div id="mydiv" class="testDiv class1 class2">
    id:mydiv-class:testDiv
  </div>
  <!-- div#myDIV -->
  <div id="div2">css测试</div>
  <div class="testDiv">
    class:testDiv
  </div>
  <div id="my_div" class="testDiv">css测试</div>
  <!-- div#myDiv.testDiv -->
  <div>css测试</div>
  <div>
    <div>
      <!-- <div>div1</div> -->
      <p>div2shang-p-p</p>
      <div>div2</div>
      <p>div2-p</p>
      <a href="">123</a>
      <p>div2-p-p</p>
      <div>div3
        <p>p2</p>
        <h1>
          <p>p3</p>
        </h1>
      </div>
    </div>
  </div>
</body>

</html>